<script setup>
import { onMounted, ref, computed } from "vue";
import xTableRender from "./xTableRender.vue";
import { useRoute } from "vue-router";

const props = defineProps({
  tableColumConfig: {
    type: Object,
    default: () => {},
  },
});
const exData = computed(() => {
  return window.localStorage.getItem("exData") || "";
});

const route = useRoute();

const renderItem = computed(() => {
  return function (templateList, row) {
    if (!Array.isArray(templateList)) {
      return [];
    }
    return templateList.filter((i) => {
      return i.showItem
        ? i.showItem({
            row: row,
            route: route,
            exData: exData.value,
          })
        : true;
    });
  };
});

const emit = defineEmits();

const emitFunc = (method, row) => {
  emit(method, row);
};

onMounted(() => {});
</script>
<template>
  <el-table-column
    :label="tableColumConfig.label || ''"
    :width="tableColumConfig.width || ''"
    :min-width="tableColumConfig.minWidth || ''"
    :prop="tableColumConfig.prop"
    :align="tableColumConfig.align || 'left'"
    :header-align="tableColumConfig.headerAlign || 'left'"
    :fixed="tableColumConfig.fixed || null"
  >
    <template #default="scope">
      <!-- 循环可能存在的template数组 -->
      <div
        class="x-table-template"
        v-if="
          tableColumConfig.template &&
          Array.isArray(tableColumConfig.template) &&
          !tableColumConfig.children
        "
        :style="tableColumConfig.alignStyle || ''"
      >
        <div
          v-for="(i, _index) in renderItem(
            tableColumConfig.template,
            scope.row
          )"
          :key="_index"
        >
          <!-- 按钮项 -->
          <template v-if="i.type === 'button'">
            <el-button
              :type="i.assemblyType || 'primary'"
              :disabled="
                i.disabled
                  ? i.disabled({
                      row: scope.row,
                      route: route,
                      exData: exData,
                    })
                  : false
              "
              @click="
                emitFunc(i.method || 'defaultMethod', {
                  row: scope.row,
                  index: scope.$index,
                  additionalParams: i.addParams || '',
                })
              "
            >
              {{ i.text }}
            </el-button>
          </template>
          <!-- icon项 -->
          <template v-else-if="i.type === 'icon'">
            <el-link
              :type="i.assemblyType || 'primary'"
              :disabled="
                i.disabled
                  ? i.disabled({
                      row: scope.row,
                      route: route,
                      exData: exData,
                    })
                  : false
              "
              @click="
                emitFunc(i.method || 'defaultMethod', {
                  row: scope.row,
                  index: scope.$index,
                  additionalParams: i.addParams || '',
                })
              "
            >
              <!-- icon的样式 具体看 https://element.eleme.cn/#/zh-CN/component/icon -->
              <i :class="i.iconClass"></i>
            </el-link>
          </template>
          <!-- input输入框 -->
          <template v-else-if="i.type === 'input'">
            <el-input
              class="x-table-input"
              v-model="scope.row[`${tableColumConfig.prop}`]"
              clearable
              :type="i.assemblyType || 'text'"
              :placeholder="i.placeholder || '请输入'"
              :disabled="
                i.disabled
                  ? i.disabled({
                      row: scope.row,
                      route: route,
                      exData: exData,
                    })
                  : false
              "
              @blur="
                emitFunc(i.method || 'defaultMethod', {
                  row: scope.row,
                  index: scope.$index,
                  additionalParams: i.addParams || '',
                })
              "
            ></el-input>
          </template>
          <!-- 文字方面的 -->
          <template v-else-if="i.type === 'link'">
            <el-link
              :type="i.assemblyType || 'primary'"
              :disabled="
                i.disabled
                  ? i.disabled({
                      row: scope.row,
                      route: route,
                      exData: exData,
                    })
                  : false
              "
              @click="
                emitFunc(i.method || 'defaultMethod', {
                  row: scope.row,
                  index: scope.$index,
                  additionalParams: i.addParams || '',
                })
              "
            >
              {{ i.text }}
            </el-link>
          </template>
          <!-- 非超链接 -->
          <template v-else-if="i.type === 'span'">
            <span
              @click="
                emitFunc(i.method || 'defaultMethod', {
                  row: scope.row,
                  index: scope.$index,
                  additionalParams: i.addParams || '',
                })
              "
              :style="i.spanStyle ? i.spanStyle(scope.row) : ''"
            >
              {{ i.span(scope.row) }}
            </span>
          </template>
          <template v-else-if="i.type === 'render'">
            <xTableRender
              v-bind="$attrs"
              :sc="scope"
              :row="scope.row"
              :render="i.render(scope.row, that)"
              :rederStyle="i.style(scope.row)"
            ></xTableRender>
          </template>
          <template v-else-if="i.type === 'renderLink'">
            <span
              v-for="(_x, _xindex) in i.renderLink(scope.row)"
              :key="_xindex"
            >
              <el-link
                @click="
                  emitFunc(i.method || 'defaultMethod', {
                    row: scope.row,
                    index: scope.$index,
                    additionalParams: i.addParams || '',
                    linkIndex: _xindex,
                  })
                "
                :disabled="
                  i.disabled
                    ? i.disabled({
                        row: scope.row,
                        route: route,
                        exData: exData,
                      })
                    : false
                "
                :type="i.assemblyType ? i.assemblyType() : 'primary'"
                :style="i.linkStyle"
              >
                {{ _x }}
                {{
                  _xindex != i.renderLink(scope.row).length - 1
                    ? i.renderFill || ";"
                    : ""
                }}
              </el-link>
            </span>
          </template>
          <!-- 自定义值 -->
          <el-link
            @click="
              emitFunc(i.method || 'defaultMethod', {
                row: scope.row,
                index: scope.$index,
                additionalParams: i.addParams || '',
              })
            "
            v-if="i.supplement"
            :type="i.suppleType ? i.suppleType(scope.row) : ' '"
            :disabled="
              i.disabled
                ? i.disabled({
                    row: scope.row,
                    route: route,
                    exData: exData,
                  })
                : false
            "
          >
            {{ i.supplement(scope.row) }}
          </el-link>
        </div>
      </div>

      <template v-else>
        <el-tooltip
          placement="top-start"
          :disabled="
            scope.row[`${tableColumConfig.prop}`] == 0 ||
            (scope.row[`${tableColumConfig.prop}`] &&
              scope.row[`${tableColumConfig.prop}`].toString().length < 20) ||
            !scope.row[`${tableColumConfig.prop}`]
          "
        >
          <div slot="content">
            <span style="max-width: 800px">{{
              scope.row[`${tableColumConfig.prop}`]
            }}</span>
          </div>
          <div>
            {{ scope.row[`${tableColumConfig.prop}`] }}
          </div>
        </el-tooltip>
      </template>

      <!-- 可能存在的子集 -->
      <template v-if="tableColumConfig.children">
        <tableTemplate
          v-for="(i, __index) in tableColumConfig.children"
          :key="__index"
          :tableColumConfig="i"
          v-bind="$attrs"
        ></tableTemplate>
      </template>
    </template>
  </el-table-column>
</template>
<style lang="scss"></style>
